A user interface (UI) of an application program often has hundreds or thousands of elements that when rendered are combined in complex ways to provide a (hopefully) visually appealing user experience that is also straightforward and consistent to use. During program running, it is common to organize UI into a tree structure, in which each element of such a tree has at most one parent element and zero or more child elements.
To draw the UI tree, it is common to perform a pre-order traversal, where an element draws, and then each of its children elements draw in order, recursively. This type of traversal establishes a z-order such that when drawn using a painter's algorithm, a UI element's children are visually on top of the parent UI element's own drawing.
For example, a UI designer may want to have a rectangular blue button that contains some black text (e.g., “Click Me”). The designer arranges the elements such that the parent element draws a blue rectangle and then a child text element draws the black text string over (positioned within) that blue rectangle. Structuring the UI tree with the child text element decoupled in this way from the parent button element provides a useful property in that the tree is composable. For example, because the text is decoupled from the button, the designer may instead have the button contain an image (by having an Image UIElement as the child) instead of the text, or may have both an image (one child) and text (another child) drawn in the same button. If the elements are objects containing logic/code, (that is, at least the button element), the logic/behavior configured in the button element's code is unchanged.
However, consider that the button element is given focus (e.g., via a keyboard, game controller, mouse or the like), and the designer wants to change the way that the button element is presented to the user to reflect this focused state, such as by drawing an orange oval behind the button to highlight the button's appearance when focused. In this situation, the highlighted oval does not share the property of being composable, because the button (rendered as the blue rectangle) needs to know the appearance of its highlight (the orange oval) so that the orange oval can be drawn prior to drawing the button's own blue rectangle appearance.